<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<title>登录注册</title>
<style type="text/css">
body {background: url(imgs/loginbkg.jpg);background-repeat: no-repeat;background-size: cover;}
form {position: relative;z-index: 1;background: #FFFFFF;max-width: 360px;margin: 80px auto 100px;padding: 40px;text-align: center;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
form input {font-family: "Roboto", sans-serif;outline: 0;background: #f2f2f2;width: 100%;border: 0;margin: 0 0 15px;padding: 15px;box-sizing: border-box;font-size: 14px;}
form input[type='submit'] {font-family: "Microsoft YaHei", "Roboto", sans-serif;text-transform: uppercase;outline: 0;background: pink;width: 100%;border: 0;padding: 15px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
form .message {color: lightpink;text-decoration: none;text-align: left;}
/* 数字输入的不要显示箭头 */
  /*谷歌*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
   -webkit-appearance: none;
  }
  /*火狐*/
  input[type="number"] {
   -moz-appearance: textfield;
  }

</style>
</head>
<body>
	<div class="container">
		<form action="login.do" method="post" autocomplete="off">
			<p><input type="number" required="required" name="uid" id="uid" placeholder="账户"></p>
			<p class="message"></p>
			
			<p><input type="text" required="required" name="encodedpass" id="encodedpass" placeholder="密码"></p>
			<p class="message"></p>

			<p class="message" id="msg">${msg }</p>
			<input type="submit" value="登录">
		</form>
	</div>
	<script type="text/javascript">
	  $("#uid").blur(function(){
		  checkUid();
	  });
	  $('#encodedpass').blur(function(){
		  checkPwd();
	  })
	
	  //提交的时候两个按照要求，满足了才可以
		$("form").submit(function(e){
 			 return checkUid()&& checkPwd();
		});
		
	  $('form').change(function(e){
		  $('#msg').html('');
	  });
	
	
	
	
	
	/* 验证uid 数字2-8位 */
    function checkUid() {
		var obj = $('#uid');
        var uid = obj.val();
        var uidReg = /^\d{2,8}$/;
        if (!uidReg.test(uid)) {
            obj.parent().next().html("请输入2-8位数字组成的账户");
            return false;
        }
        else {
        	obj.parent().next().css('color','green');
        	obj.parent().next().html("格式正确");
            return true;
        }
    }
	
	/* 验证密码 6-12位数字字母混合密码 */
       function checkPwd() {
          //密码
          var pwd = $('#encodedpass').val();
          var reg = /^[\d\w]{6,12}$/;
          if (!reg.test(pwd)) {
              $('#encodedpass').parent().next().text("请输入6~12以内数字、字母或组合密码");
              return false;
          }
          else {
        	  $('#encodedpass').parent().next().css('color','green');
        	  $('#encodedpass').parent().next().html("格式正确");
        	  return true;
          }
      }
	
	
	
	
	
	
	
	
	
	</script>
</body>
</html>